<template>
  <div class="cropdetail">
    <div class="line">
      <span>|</span>
      <span>{{ cropName }}</span>
    </div>
    <div class="header">
      <div class="left">
        <el-select v-model="value" placeholder="请选择" style="margin-right:2%" @change="select(value)">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="input" placeholder="请输入名称" style="margin-right:2%" />
        <el-button size="medium" @click="search">搜索</el-button>
      </div>
      <div class="right">
        <el-button type="primary" size="small" icon="el-icon-arrow-left" @click="goback">返回</el-button>
        <el-button type="primary" size="small" icon="el-icon-tickets" @click="exportReport">导出实训报告</el-button>
        <el-button type="primary" size="small" icon="el-icon-receiving" @click="exportData">导出调查数据</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="77"
        />
        <el-table-column
          label="序号"
          width="200"
        >
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column
          prop="className"
          label="班级"
          width="200"
        />
        <el-table-column
          prop="classGrade"
          label="年级"
          width="200"
        />
        <el-table-column
          prop="classFields"
          label="地块"
          width="240"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleLook(scope.$index, scope.row)"
            ><i class="el-icon-view" /></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getAllclassData" />
    </div>
  </div>
</template>

<script>
import { getAllclassData, getTeacherClassData, getAllGrade, exportDataReprotTeacher } from '@/api/dataReport'
import Pagination from '@/components/Pagination'
import { exportReportData } from '@/api/report'
export default {
  name: 'Cropdetail',
  components: { Pagination },
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      options: [{
        value: '',
        label: '全部年级'
      }],
      cropId: '',
      cropName: '',
      value: '',
      input: '',
      tableData: [],
      multipleSelection: [],
      listLoading: false
    }
  },
  created() {
    this.cropId = this.$route.params.cropId
    const query = {
      grade: '',
      limit: '', // 容量默认为20
      name: '',
      page: ''// 默认为1
    }
    this.getAllclassData()
    this.getAllGrade()
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    exportReport() {
      if (this.multipleSelection.length) {
        const classIds = []
        this.multipleSelection.forEach(item => classIds.push(item.classId))
        const query = {
          cropId: this.cropId,
          teacherId: this.$store.getters.id,
          classIds: classIds
        }
        console.log(query)
        exportReportData(query).then(res => {
          const blob = new Blob([res.data])
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = '实训报告.zip' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      } else {
        this.$message({
          type: 'warning',
          message: '至少选择其中的一项'
        })
      }
    },
    exportData() {
      if (this.multipleSelection.length) {
        const classIds = []
        this.multipleSelection.forEach(item => classIds.push(item.classId))
        const query = {
          cropId: this.cropId,
          teacherId: this.$store.getters.id,
          classIds: classIds
        }
        exportDataReprotTeacher(query).then(res => {
          const blob = new Blob([res.data])
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = '总数据.zip' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      } else {
        this.$message({
          type: 'warning',
          message: '至少选择其中的一项'
        })
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleLook(index, row) {
      const data = {
        cropId: this.cropId,
        classId: this.tableData[index].classId
      }
      this.$router.push(`/trainning/classdata/${this.cropId}/${this.tableData[index].classId}`)
    },
    getAllclassData(data) {
      this.listLoading = true
      if (this.$store.getters.roles == 'admin') {
        getAllclassData(data).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.listLoading = false
        })
      } else {
        const data = {
          teacherId: this.$store.getters.id
        }
        getTeacherClassData(data).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
          this.listLoading = false
        })
      }
    },
    getAllGrade() {
      getAllGrade().then(res => {
        for (let i = 0; i < res.data.length; i++) {
          this.options.push({
            value: res.data[i],
            label: res.data[i]
          })
        }
      })
      console.log(this.options)
    },
    select(value) {
      const data = {
        grade: value
      }
      this.getAllclassData(data)
    },
    search() {
      const data = {
        name: this.input
      }
      this.getAllclassData(data)
    }
  }
}
</script>
<style scoped>
    .line{
        width: 100%;
        color: #345E8F;
        font-size: 16px;
        margin-bottom: 1%;
    }
    span:first-child{
        font-weight: bold;
        margin-right: 1%;
        font-size: 18px;
    }
    .header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 1%;
    }
    .left{
        display: flex;
        justify-content: flex-start;
    }
    .pagination{
        margin-top: 2%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
